<template>
  <el-card shadow="never" class="aui-cchangeAdvanceard--fill">
    <div class="mod-wms__spu}">
      <wms-form v-model="dataForm" :formList="formList" :table-column="tableColumn" :advanced="advanced"
        @check-change="checkChange" @changeAdvance="changeAdvance" @getDataList="getDataList" @getReset="getReset">
        <el-form-item>
          <div style="display: inline-flex; gap: 10px; align-items: center">
          <el-button v-if="$hasPermission('wms:spu:save')" type="primary" @click="addOrUpdateHandle()">{{
            $t('add')
          }}</el-button>
          <el-button type="success" plain @click="exportHandle">物料导出
          </el-button>
          <el-upload
              :action="importURL"
              :on-change="uploadFile"
              :auto-upload="false"
              :show-file-list="false"
          >
            <el-button type="success" plain>物料导入</el-button>
          </el-upload>
          </div>
        </el-form-item>
      </wms-form>
      <wms-table ref="wmsTable" v-model="dataForm" :page="page" :total="total" :limit="limit" :tableData="dataList"
        :table-column="column" :module-options="mixinViewModuleOptions" :dataListLoading="dataListLoading"
        :showSelection="true" @addOrUpdateHandle="addOrUpdateHandle"
        @dataListSelectionChangeHandle="dataListSelectionChangeHandle" @deleteHandle="deleteHandle"
        @pageSizeChangeHandle="pageSizeChangeHandle" @pageCurrentChangeHandle="pageCurrentChangeHandle" />
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./components/spu-add-or-update";
import debounce from "lodash/debounce";
import { formList, tableColumn } from './config'
import wmsTable from '@/components/wms-table'
import wmsForm from '@/components/wms-form'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/wms/spu/page",
        getDataListIsPage: true,
        exportURL: "/wms/spu/export",
        deleteURL: "/wms/spu",
        deleteIsBatch: true,
        deleteIsBatchKey: "spuId"
      },
      importURL:"/wms/spu/import",
      dataForm: {
        spuId:'',
        spuNo: '',
        spuName: '',
        spuSpec:''
      },
      formList,
      tableColumn,
      column: [],
      advanced: false
    };
  },
  components: {
    AddOrUpdate,
    wmsTable,
    wmsForm
  },
  methods: {
    //0.重置搜索框
    getReset() {
      this.dataForm = this.$options.data().dataForm;
    },
    uploadFile(file) {
      console.log(file.raw)
      const formData = new FormData();
      formData.append('file', file.raw);
      this.$http.post(this.importURL, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(({ data: res }) => {
        if (res.code != 0) {
          return this.$message.error(res.msg);
        }
        this.$message({
          message: res.msg,
          type: "success",
          duration: 5000,
          onClose: () => {
            this.getDataList();
          },
        });
      })
          .catch(error => {
            console.error('上传失败', error);
          });
    },
  },
};
</script>
<style>
.right-handle-group {
  float: right;
}
</style>
